<template>
  <div class="vocab-testing-app" :class="{ 'dark-theme': isDarkMode }">
    <!-- 头部区域 -->
    <header class="app-header shadow-md">
      <div class="container header-container">
        <!-- Logo区域 -->
        <div class="logo-container flex items-center">
          <div class="logo bg-primary text-white w-10 h-10 rounded-lg flex items-center justify-center font-bold text-xl">A</div>
          <h1 class="ml-3 text-xl font-bold text-primary">AI辅助学习系统</h1>
        </div>
        
        <!-- 系统标题 -->
        <div class="system-title hidden md:block">
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300">英语模块(词汇自测)</h2>
        </div>
        
        <!-- 功能按钮区域 -->
        <div class="function-buttons flex items-center">
          <el-button circle size="small" class="func-btn" title="搜索">
            <i class="fa fa-search text-gray-600 dark:text-gray-400"></i>
          </el-button>
          <el-button circle size="small" class="func-btn" title="个人中心">
            <i class="fa fa-user text-gray-600 dark:text-gray-400"></i>
          </el-button>
          <el-button 
            circle 
            size="small" 
            class="theme-btn"
            @click="toggleTheme"
            title="切换主题"
          >
            <span>{{ isDarkMode ? '🌞' : '🌙' }}</span>
          </el-button>
        </div>
      </div>
    </header>

    <!-- 导航栏 - 仅修改跳转方式，保持样式不变 -->
    <nav class="app-nav bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
      <div class="container">
        <el-menu mode="horizontal" :default-active="activeNav" class="text-sm">
          <!-- 将button改为router-link，保持原有样式 -->
          <el-menu-item index="vocab-list">
            <i class="fa fa-list-ul mr-1"></i>
            <router-link to="/english/vo" class="nav-link">词汇列表</router-link>
          </el-menu-item>
          <el-menu-item index="testing" class="active-nav-item">
            <i class="fa fa-check-square-o mr-1"></i>词汇自测
          </el-menu-item>
          <el-menu-item index="wordbook">
            <i class="fa fa-book mr-1"></i>
            <router-link to="/english/wordbook" class="nav-link">生词本</router-link>
          </el-menu-item>
          <el-menu-item index="statistics">
            <i class="fa fa-bar-chart mr-1"></i>
            <router-link to="/english/statistics" class="nav-link">学习统计</router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </nav>

    <!-- 词汇本选择 - 保持不变 -->
    <div class="book-select-container px-4 py-3 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
      <div class="container">
        <el-select 
          v-model="selectedBookId" 
          @change="handleBookChange" 
          placeholder="选择自测词汇本" 
          size="small"
          :disabled="loading"
          class="book-select w-64"
        >
          <el-option 
            v-for="book in bookList" 
            :key="book.bookId" 
            :label="book.bookName" 
            :value="book.bookId"
          ></el-option>
        </el-select>
        <el-alert 
          v-if="errorMsg" 
          :message="errorMsg" 
          type="error" 
          :closable="true" 
          class="mt-2"
          @close="errorMsg = ''"
        ></el-alert>
      </div>
    </div>

    <!-- 主内容区 - 保持不变 -->
    <main class="main-content py-8">
      <div class="container">
        <!-- 加载状态 -->
        <el-loading 
          v-if="loading && words.length === 0" 
          text="加载词汇数据中..." 
          class="loading-indicator"
        ></el-loading>

        <!-- 空状态 -->
        <div v-else-if="!loading && words.length === 0 && !errorMsg" class="empty-state text-center py-12">
          <el-empty description="请选择词汇本开始自测"></el-empty>
        </div>

        <template v-else-if="!loading && words.length > 0">
          <!-- 进度指示器 -->
          <div class="progress-container bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 mb-8">
            <div class="progress-info flex justify-between items-center mb-2">
              <span class="text-sm text-gray-600 dark:text-gray-400">当前进度</span>
              <span class="text-sm font-medium text-gray-800 dark:text-white">{{ currentProgress }}/{{ totalWords }}</span>
            </div>
            <el-progress 
              :percentage="progressPercentage" 
              stroke-width="6"
              :stroke-color="isDarkMode ? '#818cf8' : '#4f46e5'"
            ></el-progress>
          </div>
          
          <!-- 自测卡片 -->
          <div class="testing-card bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 md:p-8 mb-8 transform hover:shadow-lg transition-all duration-300">
            <!-- 词汇信息区 -->
            <div class="word-info text-center mb-8">
              <el-tag :type="levelType" class="mb-4">{{ currentWord.level }}</el-tag>
              <h2 class="word text-[clamp(2rem,5vw,3rem)] font-bold text-gray-900 dark:text-white mb-2">{{ currentWord.word }}</h2>
              <div class="pronunciation flex items-center justify-center space-x-2 text-gray-600 dark:text-gray-400 mb-6">
                <span>{{ currentWord.pronunciation }}</span>
                <el-button 
                  circle 
                  size="mini" 
                  class="sound-btn"
                  @click="playSound"
                >
                  <i class="fa fa-volume-up text-gray-600 dark:text-gray-400"></i>
                </el-button>
              </div>
              
              <!-- 释义显示控制 -->
              <el-button 
                @click="toggleMeaning"
                class="meaning-btn px-6 py-2 rounded-full border border-primary text-primary hover:bg-primary hover:text-white dark:border-primary dark:text-primary dark:hover:bg-primary dark:hover:text-white transition-all duration-300 mb-6"
                :type="showMeaning ? 'primary' : 'default'"
              >
                {{ showMeaning ? '隐藏释义' : '显示释义' }}
              </el-button>
              
              <!-- 隐藏的释义区域 -->
              <div v-if="showMeaning" class="meaning-content bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 md:p-6 text-left transform transition-all duration-300">
                <p class="part-of-speech inline-block px-2 py-1 bg-primary/10 text-primary rounded-md text-sm font-medium mb-2">
                  {{ currentWord.partOfSpeech }}
                </p>
                <p class="definition text-gray-800 dark:text-gray-200 text-lg leading-relaxed">
                  {{ currentWord.definition }}
                </p>
                <div class="example pt-4 border-t border-gray-200 dark:border-gray-600">
                  <p class="text-gray-700 dark:text-gray-300 mb-1">
                    <i class="fa fa-quote-left mr-1 text-gray-500 dark:text-gray-400"></i>{{ currentWord.example }}<i class="fa fa-quote-right ml-1 text-gray-500 dark:text-gray-400"></i>
                  </p>
                  <p class="example-cn text-gray-500 dark:text-gray-400 text-sm">
                    {{ currentWord.chinese }}
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 自测按钮区 -->
            <div class="answer-buttons grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
              <el-button 
                @click="markWord('known')"
                class="answer-btn known-btn flex flex-col items-center justify-center p-4 rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-success hover:bg-success/5 dark:hover:bg-success/10 transition-all duration-300"
                :type="selectedStatus === 'known' ? 'success' : 'default'"
              >
                <i class="fa fa-check-circle text-3xl text-success mb-2"></i>
                <span>记忆清楚</span>
              </el-button>
              <el-button 
                @click="markWord('fuzzy')"
                class="answer-btn fuzzy-btn flex flex-col items-center justify-center p-4 rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-warning hover:bg-warning/5 dark:hover:bg-warning/10 transition-all duration-300"
                :type="selectedStatus === 'fuzzy' ? 'warning' : 'default'"
              >
                <i class="fa fa-question-circle text-3xl text-warning mb-2"></i>
                <span>记忆模糊</span>
              </el-button>
              <el-button 
                @click="markWord('forgot')"
                class="answer-btn forgot-btn flex flex-col items-center justify-center p-4 rounded-xl border-2 border-gray-200 dark:border-gray-600 hover:border-danger hover:bg-danger/5 dark:hover:bg-danger/10 transition-all duration-300"
                :type="selectedStatus === 'forgot' ? 'danger' : 'default'"
              >
                <i class="fa fa-times-circle text-3xl text-danger mb-2"></i>
                <span>完全遗忘</span>
              </el-button>
            </div>
            
            <!-- 控制按钮 -->
            <div class="control-buttons flex flex-wrap gap-3 justify-between">
              <el-button 
                @click="changeWord"
                class="control-btn flex-1 min-w-[120px] px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300 flex items-center justify-center space-x-2"
              >
                <i class="fa fa-refresh text-gray-600 dark:text-gray-400"></i>
                <span>换词</span>
              </el-button>
              <el-button 
                @click="nextWord"
                type="primary"
                class="control-btn next-btn flex-2 min-w-[150px] px-6 py-3 rounded-lg bg-primary text-white hover:bg-primary/90 dark:bg-primary dark:hover:bg-primary/90 transition-all duration-300 flex items-center justify-center space-x-2"
                :disabled="!selectedStatus"
              >
                <span>下一个</span>
                <i class="fa fa-arrow-right"></i>
              </el-button>
            </div>
          </div>
          
          <!-- 学习统计卡片 -->
          <div class="stats-container grid grid-cols-1 md:grid-cols-3 gap-4">
            <el-card class="stat-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 transform hover:shadow-md transition-all duration-300">
              <div class="stat-title text-sm font-medium text-gray-500 dark:text-gray-400">今日学习</div>
              <div class="stat-value text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ todayWords }} 词</div>
              <div class="stat-sub text-xs text-gray-500 dark:text-gray-400 mt-2">目标: {{ dailyGoal }}词</div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-3">
                <div class="bg-primary h-1.5 rounded-full" style="width: 68%"></div>
              </div>
            </el-card>
            <el-card class="stat-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 transform hover:shadow-md transition-all duration-300">
              <div class="stat-title text-sm font-medium text-gray-500 dark:text-gray-400">记忆准确率</div>
              <div class="stat-value text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ memoryRate }}%</div>
              <div class="stat-sub text-xs text-green-500 dark:text-green-400 mt-2">
                <i class="fa fa-arrow-up mr-1"></i>较昨日 +2%
              </div>
            </el-card>
            <el-card class="stat-card bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5 transform hover:shadow-md transition-all duration-300">
              <div class="stat-title text-sm font-medium text-gray-500 dark:text-gray-400">连续学习</div>
              <div class="stat-value text-3xl font-bold text-gray-900 dark:text-white mt-1">{{ streakDays }} 天</div>
              <div class="stat-sub text-xs text-gray-500 dark:text-gray-400 mt-2">本周已学: {{ weekWords }}词</div>
            </el-card>
          </div>
        </template>
      </div>
    </main>

    <!-- 底部区域 -->
    <footer class="app-footer bg-white dark:bg-gray-800 shadow-inner py-6 mt-8">
      <div class="container">
        <div class="footer-content text-center">
          <p class="copyright text-gray-500 dark:text-gray-400 text-sm">© 2025 AI辅助学习系统 版权所有</p>
          <div class="footer-links flex justify-center space-x-6 mt-4">
            <a href="#" class="footer-link text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors text-sm">系统说明</a>
            <a href="#" class="footer-link text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors text-sm">使用帮助</a>
            <a href="#" class="footer-link text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary transition-colors text-sm">联系我们</a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
// 导入封装的API服务（确保路径正确）
import vocabularyService from '@/views/subjects/english/pages/vocabulary-study/script/vocabulary-js/vocabularyService.js';

// 主题状态
const isDarkMode = ref(false);
const primaryColor = '#4f46e5'; // 主色调

// 导航状态
const activeNav = ref('testing');

// 自测状态
const showMeaning = ref(false);
const selectedStatus = ref('');
const currentProgress = ref(0);
const currentWordIndex = ref(0);

// 后端数据相关状态
const words = ref([]); // 从后端获取的单词列表
const bookList = ref([]); // 词汇本列表
const selectedBookId = ref(''); // 选中的词汇本ID
const loading = ref(false); // 加载状态
const errorMsg = ref(''); // 错误信息

// 学习统计数据
const todayWords = ref(34);
const dailyGoal = ref(50);
const memoryRate = ref(68);
const streakDays = ref(7);
const weekWords = ref(210);

// 当前显示的单词（从后端数据中获取）
const currentWord = computed(() => words.value[currentWordIndex.value] || {});

// 总单词数（从后端数据长度获取）
const totalWords = computed(() => words.value.length);

// 计算进度百分比
const progressPercentage = computed(() => {
  if (totalWords.value === 0) return 0;
  return Math.round((currentProgress.value / totalWords.value) * 100);
});

// 根据单词级别返回对应的Element标签类型
const levelType = computed(() => {
  switch(currentWord.value.level) {
    case '初级': return 'success';
    case '中级': return 'info';
    case '高级': return 'warning';
    default: return 'default';
  }
});

// 生命周期钩子：初始化数据
onMounted(async () => {
  // 检查本地存储的主题偏好
  const savedTheme = localStorage.getItem('aiLearnTheme');
  if (savedTheme === 'dark') {
    toggleTheme();
  }

  // 加载词汇本列表
  try {
    loading.value = true;
    bookList.value = await vocabularyService.getVocabBooks();
    // 默认选择第一个词汇本
    if (bookList.value.length > 0) {
      selectedBookId.value = bookList.value[0].bookId.toString();
      // 加载对应单词
      await loadWordsByBookId(Number(selectedBookId.value));
    }
  } catch (err) {
    errorMsg.value = err.message || '加载词汇本失败';
  } finally {
    loading.value = false;
  }
});

// 根据词汇本ID加载单词
const loadWordsByBookId = async (bookId) => {
  try {
    loading.value = true;
    errorMsg.value = '';
    
    // 调用API获取单词数据
    const rawWords = await vocabularyService.getWordsByBookId(bookId);
    
    // 转换为自测页面所需格式
    words.value = rawWords.map(word => ({
      id: word.id,
      word: word.word,
      pronunciation: word.pronunciation,
      definition: word.definition,
      partOfSpeech: word.partOfSpeech || '未知词性',
      example: word.example || '无例句',
      chinese: word.chinese || '无中文翻译',
      level: word.word.length <= 4 ? '初级' : word.word.length <= 7 ? '中级' : '高级'
    }));
    
    // 重置自测进度
    currentProgress.value = 0;
    currentWordIndex.value = 0;
    resetWordState();
  } catch (err) {
    errorMsg.value = err.message || '加载单词失败';
    words.value = [];
  } finally {
    loading.value = false;
  }
};

// 处理词汇本切换
const handleBookChange = () => {
  if (selectedBookId.value) {
    loadWordsByBookId(Number(selectedBookId.value));
  }
};

// 主题切换函数
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
  document.documentElement.classList.toggle('dark-theme', isDarkMode.value);
  localStorage.setItem('aiLearnTheme', isDarkMode.value ? 'dark' : 'light');
  
  // 添加主题切换动画
  const app = document.querySelector('.vocab-testing-app');
  if (app) {
    app.classList.add('theme-transition');
    setTimeout(() => app.classList.remove('theme-transition'), 300);
  }
};

// 显示/隐藏释义
const toggleMeaning = () => {
  showMeaning.value = !showMeaning.value;
};

// 播放发音（模拟）
const playSound = () => {
  console.log(`播放 ${currentWord.value.word} 的发音`);
  // 实际开发中可调用语音API
};

// 标记单词记忆状态
const markWord = (status) => {
  selectedStatus.value = status;
  console.log(`标记 ${currentWord.value.word} 为 ${status}`);
};

// 换词（随机切换当前词汇本中的单词）
const changeWord = () => {
  if (words.value.length <= 1) return;
  
  let newIndex;
  do {
    newIndex = Math.floor(Math.random() * words.value.length);
  } while (newIndex === currentWordIndex.value);
  
  currentWordIndex.value = newIndex;
  resetWordState();
};

// 下一个单词
const nextWord = () => {
  if (!selectedStatus.value || totalWords.value === 0) return;
  
  // 保存当前单词的学习状态
  saveLearningStatus();
  
  // 更新进度
  if (currentProgress.value < totalWords.value) {
    currentProgress.value++;
  }
  
  // 切换到下一个单词（循环）
  currentWordIndex.value = (currentWordIndex.value + 1) % totalWords.value;
  resetWordState();
};

// 重置单词显示状态
const resetWordState = () => {
  showMeaning.value = false;
  selectedStatus.value = '';
};

// 保存学习状态（模拟）
const saveLearningStatus = () => {
  console.log(`保存 ${currentWord.value.word} 的学习状态: ${selectedStatus.value}`);
  // 实际项目中可调用API保存到后端
};

// 路由跳转（保留方法，兼容其他可能的跳转需求）
const router = useRouter();
const goTo = (path) => {
  router.push(path);
};
</script>

<style scoped>
/* 保持您原始的完整样式表不变 */
:root {
  --primary-color: #4f46e5;
  --primary-light: #818cf8;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --danger-color: #ef4444;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --border-color: #e5e7eb;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --transition-speed: 0.3s;
}

.dark-theme {
  --text-primary: #f3f4f6;
  --text-secondary: #d1d5db;
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --border-color: #374151;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.vocab-testing-app {
  min-height: 100vh;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.book-select-container {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.app-header {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 48px;
  height: 48px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.system-title h2 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.function-buttons {
  display: flex;
  gap: 8px;
}

.func-btn, .theme-btn {
  transition: all 0.2s ease;
}

.func-btn:hover, .theme-btn:hover {
  transform: scale(1.1);
}

.app-nav {
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.el-menu {
  background-color: transparent !important;
  border-bottom: none !important;
}

.el-menu-item {
  color: var(--text-secondary) !important;
}

.el-menu-item.active-nav-item,
.el-menu-item.is-active {
  color: var(--primary-color) !important;
  font-weight: 500 !important;
}

.el-menu-item:hover {
  color: var(--primary-color) !important;
  background-color: rgba(79, 70, 229, 0.05) !important;
}

.main-content {
  padding: 20px 0;
}

.progress-container {
  margin-bottom: 20px;
  padding: 16px;
  background-color: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.testing-card {
  background-color: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow);
}

.word-info {
  text-align: center;
  margin-bottom: 30px;
}

.el-tag {
  margin-bottom: 16px !important;
}

.word {
  font-size: 48px;
  font-weight: bold;
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.pronunciation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 18px;
  margin-bottom: 24px;
}

.sound-btn {
  color: var(--text-secondary) !important;
}

.sound-btn:hover {
  color: var(--primary-color) !important;
}

.meaning-btn {
  margin-bottom: 20px !important;
}

.meaning-content {
  text-align: left;
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.part-of-speech {
  display: inline-block;
  padding: 2px 8px;
  background-color: rgba(79, 70, 229, 0.1);
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
}

.definition {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.example {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-color);
}

.example-cn {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.answer-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.answer-btn {
  min-width: 120px;
  padding: 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.control-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.control-btn {
  flex: 1;
  min-width: 120px;
}

.next-btn {
  flex: 1.2;
}

.stats-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.stat-title {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.empty-state {
  background-color: var(--bg-primary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 24px;
}

.app-footer {
  margin-top: 40px;
  padding: 24px 0;
  background-color: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.footer-content {
  text-align: center;
}

.copyright {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 12px 0;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-link {
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.dark-theme .el-button--default {
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

.dark-theme .el-button--default:hover {
  background-color: var(--bg-secondary);
}

.dark-theme .el-progress-bar__outer {
  background-color: var(--bg-secondary);
}

.dark-theme .el-card {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

.dark-theme .el-menu-item.is-active {
  color: var(--primary-light) !important;
}

@media (max-width: 768px) {
  .system-title {
    display: none;
  }
  
  .word {
    font-size: 36px;
  }
  
  .answer-buttons {
    flex-direction: column;
  }
  
  .answer-btn {
    width: 100%;
  }
  
  .control-buttons {
    flex-direction: column;
  }
  
  .control-btn {
    width: 100%;
  }
  
  .stats-container {
    flex-direction: column;
  }
  
  .stat-card {
    margin-bottom: 16px;
  }
}
</style>